<template>
	<view class="search-more-box" v-if="isShow">
		<van-tree-select :height="height" :items="groups" :main-active-index.sync="active">
			<template #content>
				<!-- 跟进状态 -->
				<view v-if="active === 0">
					<van-radio-group v-model="query.active_status">
						<van-cell-group>
							<van-cell v-for="(item, index) in activeStatus" :key="index" :title="item.title" clickable>
								<template #right-icon>
									<van-radio :name="item.id" />
								</template>
							</van-cell>
						</van-cell-group>
					</van-radio-group>
				</view>
				
				<!-- 获取方式 -->
				<view v-if="active === 1">
					<van-radio-group v-model="query.allocate_type">
						<van-cell-group>
							<van-cell v-for="(item, index) in allocateTypes" :key="index" :title="item.title" clickable>
								<template #right-icon>
									<van-radio :name="item.id" />
								</template>
							</van-cell>
						</van-cell-group>
					</van-radio-group>
				</view>
				
				<!-- 员工列表 -->
				<view v-if="active === 2">
					<van-search v-model="keyword" placeholder="请输入员工姓名" />
					<van-checkbox-group v-model="query.user_id">
						<van-cell-group>
							<van-cell v-for="(item, index) in userList" :key="index" :title="item.title" v-if="(item.title).includes(keyword)" clickable>
								<template #right-icon>
									<van-checkbox :name="item.id" />
								</template>
							</van-cell>
						</van-cell-group>
					</van-checkbox-group>
				</view>
				<!-- 时间区间 -->
				<view v-if="active === 3">
					<van-radio-group v-model="query.range">
						<van-cell-group>
							<van-cell v-for="(item, index) in dateRang" :key="index" :title="item.title" clickable>
								<template #right-icon>
									<van-radio :name="item.id"/>
								</template>
							</van-cell>
						</van-cell-group>
					</van-radio-group>
					<van-cell  title="自定义" :label="getCustomizeDate" is-link @click="getDate('start')" />
					<van-calendar v-model="showCalendar" type="range" :min-date="minDate" confirm-text="完成" :show-confirm="false" @confirm="onConfirmCalendar" />
				</view>
			</template>
		</van-tree-select>
		<view class="search-btn-group">
			<van-button type="primary" size="small" @click="cancelSearch()">取消</van-button>
			<van-button type="info" size="small" class="ml10 mr10" @click="doSearch()">搜索</van-button>
		</view>
	</view>
</template>

<script>
import { request } from '@/utils/request.js';
import { formatDate } from '@/utils/formater';

export default {
	props: {
		parent: {},
		query: {}
	},
	data() {
		let height = window.innerHeight - 50;
		return {
			minDate: new Date(2010, 0, 1),
			isShow: false,
			height: height,
			keyword: '', // 检索员工名称
			active: 0, // 导航索引
			userList: [],
			groups: [{ text: '跟进状态' }, { text: '获取方式' }, { text: '员工列表' }, { text: '时间区间' }],
			activeStatus: [
				{
					id: 'all',
					title: '不限'
				},
				{
					id: '0',
					title: '未跟进'
				},
				{
					id: '1',
					title: '跟进中'
				},
				{
					id: '5',
					title: '有效客户'
				},
				{
					id: '6',
					title: '意向客户'
				},
				{
					id: '2',
					title: '成单客户'
				},
				{
					id: '7',
					title: '未接通'
				},
				{
					id: '3',
					title: '失效客户'
				},
				{
					id: '4',
					title: '无效客户'
				}
			],
			allocateTypes: [
				{
					id: 'all',
					title: '不限'
				},
				{
					id: 0,
					title: '分配获取'
				},
				{
					id: 1,
					title: '全号搜索'
				},
				{
					id: 2,
					title: '公海申请'
				},
				{
					id: 3,
					title: '自行添加'
				},
				{
					id: 4,
					title: '自动分配'
				},
				{
					id: 5,
					title: '其他转自动'
				}
			],
			showCalendar: false,
			dateRang: [
				{
					id: 'all',
					title: '不限'
				},
				{
					id: 'd',
					title: '今天'
				},
				{
					id: 'w',
					title: '本周'
				},
				{
					id: 'm',
					title: '本月'
				}
			]
		};
	},
	created() {
		this.getUserStaffs();
	},
	computed: {
		getCustomizeDate: function() {
			let customizeDate = '';
			let range = this.query.range;
			if (Array.isArray(range)) {
				customizeDate = range[0] + ' 至 ' + range[1]
			}
			
			return customizeDate;
		}
	},
	methods: {
		showSearchTree() {
			this.isShow = true;
		},
		doSearch() {
			this.parent.query.page = 1;
			this.parent.getPageData();
			this.isShow = false;
		},
		getUserStaffs() {
			let that = this;
			request({
				url: '/api/ucenter.user/getUserStaffList',
				showLoading: true,
				token: true,
				data: {},
				success(res) {
					if (res.code == 200) {
						that.userList = res.data.userList;
					}
				}
			});
		},
		getDate (){
			this.showCalendar = true;
		},
		cancelSearch() {
			// 取消并重置
			this.parent.resetSearchItem();
			this.isShow = false;
		},
		onConfirmCalendar(e) {
			const [start, end] = e;
			console.log(start, end)
			let startSeconds = Math.round(start.getTime() / 1000)
			let endSeconds = Math.round(end.getTime() / 1000)
			console.log(startSeconds,endSeconds);
			
			let startDate = formatDate(startSeconds)
			let endDate = formatDate(endSeconds)
			console.log(startDate, endDate);
			this.query.range = [startDate, endDate];
			this.showCalendar = false;
		}
	}
};
</script>

<style>
.search-more-box {
	position: fixed;
	width: 100%;
	height: 100vh;
	overflow: auto;
	left: 0;
	top: 0;
	z-index: 2000;
	background-color: #fff;
}

.ml10 {
	margin-left: 10px;
}
.mr10 {
	margin-right: 10px;
}
.van-tree-select {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
.search-btn-group {
	position: absolute;
	width: 100%;
	bottom: 12px;
	left: 0;
	text-align: right;
}
</style>
